<template>
    <div class="InvoiceMgt">
        <h4 class="titles">
            发票管理
        </h4>
        <div class="info" v-if="isShowPage==false"
            style="position: absolute;top:40%;margin-top:-80px;left:50%;margin-left:-100px;text-align: center;width:200px">
            <img src='/static//img/fapiao.png' />
            <p style="font-size:14px;color:#999999">当前没有发票信息</p>
            <el-button type="success" class="add-invoice-btn" style="margin-top:10px" @click="jumpAddInfo">添加信息
            </el-button>
        </div>

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" style="margin-top:20px;" v-else>
            <el-form-item label="开具类型" prop="unitType" style="width:400px">
                <el-select v-model="ruleForm.unitType" placeholder="请选择" style="width:300px" :disabled=isEditBtn>
                    <el-option v-for="item in unitTypeData" :key="item.value" :label="item.name" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="发票抬头" prop="invoiceTitle">
                <el-input v-model.trim="ruleForm.invoiceTitle" style="width:300px" placeholder="请填写您营业执照上的全称"
                    :disabled=isEditBtn>
                </el-input>
            </el-form-item>
            <el-form-item label="发票类型" prop="invoiceType">
                <el-select v-model="ruleForm.invoiceType" placeholder="请选择" style="width:300px" :disabled=isEditBtn>
                    <el-option v-for="item in invoiceTypeData" :key="item.value" :label="item.name" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="税务登记账号" prop="taxation">
                <el-input v-model.trim="ruleForm.taxation" style="width:300px" placeholder="请填写15到20位有效纳税人识别号"
                    :disabled=isEditBtn></el-input>
            </el-form-item>
            <el-form-item>
                <p class="tips">
                    请与贵公司财务人员核实后,仔细填写准确的三证合一后的社会统一信用代码或税务登记证号,否则将影响后续发票的正常使用
                </p>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="jumpEditInfo" v-if="isEditBtn">编辑</el-button>
                <el-button type="primary" @click="saveAddInfo" v-if="isAddBtn">提交</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')" v-if="isSaveBtn">保存</el-button>
                <el-button @click="cancel" v-if="isSaveBtn">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    import { InvoiceMgtApi } from '@/services/PersonalCenter'
    import { standardCodeApi } from '@/services/StandardCode'
    export default {
        data() {
            return {
                unitTypeData: [],
                invoiceTypeData: [],
                isEditBtn: true,
                isShowPage: false,
                isAddBtn: false,
                isSaveBtn: false,
                ruleForm: {
                    unitType: '',
                    invoiceTitle: '',
                    invoiceType: '',
                    taxation: '',
                    invoice_base_id: '',
                },
                rules: {
                    unitType: [
                        { required: true, message: '请选择开具类型', trigger: 'change' }
                    ],
                    invoiceTitle: [
                        { required: true, message: '请输入发票抬头', trigger: 'blur' }
                    ],
                    invoiceType: [
                        { required: true, message: '请选择发票类型', trigger: 'change' }
                    ],
                    taxation: [
                        { required: true, message: '请输入税务登记账号', trigger: 'blur' }
                    ],
                }
            }
        },
        methods: {
            //获取发票信息
            getOrderInfo() {
                InvoiceMgtApi.getOrderInfo().then((res) => {
                    if (res.data == '') {
                        this.isShowPage = false
                    } else {
                        this.isShowPage = true
                        this.isEditBtn = true
                        this.isAddBtn = false
                        this.isSaveBtn = false
                        this.ruleForm.unitType = res.data[0].issue_type;
                        this.ruleForm.invoiceTitle = res.data[0].invoice_title;
                        this.ruleForm.invoiceType = res.data[0].invoice_type;
                        this.ruleForm.taxation = res.data[0].duty_no;
                        this.ruleForm.invoice_base_id = res.data[0].invoice_base_id;
                    }
                })
            },
            getUnitTypeData() {
                standardCodeApi.getStandardCodeData({
                    data: {
                        code_type: 'invoiceTitle'
                    }
                }).then((res) => {
                    this.unitTypeData = res.data.list
                }).catch((error) => {
                    console.log(error)
                })
            },
            getInvoiceTypeData() {
                standardCodeApi.getStandardCodeData({
                    data: {
                        code_type: 'invoiceType'
                    }
                }).then((res) => {
                    this.invoiceTypeData = res.data.list
                }).catch((error) => {
                    console.log(error)
                })
            },

            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        InvoiceMgtApi.getEditOrderInfo({
                            data: {
                                issue_type: this.ruleForm.unitType,
                                invoice_title: this.ruleForm.invoiceTitle,
                                invoice_type: this.ruleForm.invoiceType,
                                duty_no: this.ruleForm.taxation,
                            }
                        }).then((res) => {
                            if (res.code == 1) {
                                this.$message({
                                    message: '修改成功',
                                    type: 'success'
                                });
                                this.getOrderInfo();
                            } else {
                                this.$message.error(res.data.msg)
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            jumpAddInfo() {
                this.isShowPage = true
                this.isAddBtn = true
                this.isSaveBtn = false
                this.isEditBtn = false
            },
            jumpEditInfo() {
                this.isShowPage = true
                this.isAddBtn = false
                this.isSaveBtn = true
                this.isEditBtn = false

            },
            saveAddInfo() {
                this.isShowPage = true
                this.isAddBtn = false
                this.isSaveBtn = true
                this.isEditBtn = false
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        InvoiceMgtApi.getAddOrderInfo({
                            data: {
                                issue_type: this.ruleForm.unitType,
                                invoice_title: this.ruleForm.invoiceTitle,
                                invoice_type: this.ruleForm.invoiceType,
                                duty_no: this.ruleForm.taxation,
                            }
                        }).then((res) => {
                            if (res.code == 1) {
                                this.$message({
                                    message: '添加成功',
                                    type: 'success'
                                });
                                this.getOrderInfo();
                            } else {
                                this.$message.error(res.data.msg)
                                this.$refs['ruleForm'].resetFields();
                            }
                        })

                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            cancel() {
              this.getOrderInfo();
            }
        },
        mounted() {
            this.getUnitTypeData();
            this.getInvoiceTypeData();
        },
        created() {
            // this.getData();
            this.getOrderInfo();
        }
    }
</script>
<style scoped lang="scss">
    .InvoiceMgt {
        width: 100%;
        height: 600px;

        .titles {
            color: #1441b3;
            font-weight: normal;
            font-size: 16px;
            padding-left: 20px;
            border-bottom: 1px solid #d9d9d9;
            line-height: 56px;
            margin: 0;
        }

        .add-invoice-btn {
            width: 96px;
            height: 36px;
            background: #fff;
            border-radius: 4px;
            border: 1px solid #1890ff;
            color: #1890ff;
            line-height: 12px;
        }

        .tips {
            font-size: 12px;
            color: #999;
            line-height: 22px;
            width: 490px
        }
    }
</style>